<template>
	<view class="container">
		<!-- 轮播图区域开始 -->
		<view class="swiper">
			<u-swiper :list="swiperList"></u-swiper>
		</view>
		<!-- 轮播图区域结束 -->
		<!-- 标签区域开始 -->
		<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="change" style="margin: 10rpx 0;"></u-tabs>
		<!-- 标签区域结束 -->
		<!-- 盒子内容组件 -->
		<ItemBox v-for="(item,index) in cyclopediaData" :key="index" :title='item.title' :author="item.author" :time="item.time"></ItemBox>
		<u-gap height="2" bg-color="#bbb"></u-gap>
	</view>
</template>

<script>
	import ItemBox from "../../compontents/cyclopediaBox.vue"
	export default {
		components:{
			ItemBox
		},
		data() {
			return {
				// 轮播图数据
				swiperList: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				// 标签数据
				tabList: [{
					name: '最新'
				}, {
					name: '推荐'
				}],
				// 标签选中下标
				current:0,
				// 百科数据
				cyclopediaData:[
					{
						imgUrl:"",
						title:"制冷剂在冬天怎么选择",
						author:"制冷小白",
						time:"2021-09-21",
						read:120,
						like:120
					},
					{
						imgUrl:"",
						title:"制冷剂在冬天怎么选择",
						author:"制冷小白",
						time:"2021-09-21",
						read:120,
						like:120
					}
				]
			};
		},
		methods: {
			change(index) {
				this.current = index;
			},
			// 跳转到详情页面
			toDetail(){
				console.log('1111')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 10rpx;
	}
</style>
